import type { Meta, StoryObj } from '@storybook/vue3';
import CrudFilter from '@/components/crud/filter/CrudFilter.vue';
import type { FilterCondition } from '@/components/crud/types.ts';
import {ref} from "vue";

// 直接在 Meta 类型中定义 change 事件类型
const meta: Meta<typeof CrudFilter> = {
  title: 'Crud/Filter',
  component: CrudFilter,
  tags: ['autodocs'],
  argTypes: {
    options: {
      description: '配置数组',
      table: {
        type: { summary: 'FilterCondition[]' },
        defaultValue: { summary: '[]' }
      }
    }
  },
};
export default meta;
type Story = StoryObj<typeof CrudFilter>;

// 基础使用场景
export const BasicUsage: Story = {
  args: {
    options: [
      {
        field: 'title',
        title: '标题',
        operator: '$eq',
        value: '',
        component: {
          name: 'el-input',
          placeholder: '请输入标题',
          attrs: {}
        }
      },
      {
        field: 'createdAt',
        title: '创建时间',
        operator: '$gte',
        fields: ['start', 'end'],
        operators: ['$gte', '$lte'],
        value: [],
        component: {
          name: 'el-date-picker',
          attrs: {
            type: 'datetimerange'
          }
        }
      }
    ] as FilterCondition[]
  },
  render: (args) => ({
    components: { CrudFilter },
    setup() {
      const filters = ref<FilterCondition[]>();
      const onChange = (s: FilterCondition[]) => {
        filters.value = s
      };
      return { args, onChange, filters, };
    },
    template: `
      <div>
        Tip: 使用fields和operators类时间类型参数筛选
      </div>
      <CrudFilter 
        :options="args.options" 
        @change="onChange"
      />
      <div>
        {{filters}}
      </div>
    `
  })
};
